<template>
  <div class="log-container" :type="type" :style="{ flexDirection: type }">
    <svg-icon class="logo" name="logo" :width="width + 'px'" :height="width + 'px'"></svg-icon>
    <span v-if="showTitle" class="title ellipsis" :type="type" :style="{ fontSize: width * (12 / 22) + 'px' }">
      {{ layoutConfig.Title }}
    </span>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useSettingStore } from '@/store/modules/setting.ts'
let props = defineProps({
  size: {
    type: String,
    default: 'small', // large、midle、small、mini
  },
  // log与标题的排列方向
  column: {
    type: Boolean,
  },
  row: {
    type: Boolean,
  },
  showTitle: {
    type: Boolean,
    default: true,
  },
})
const { layoutConfig } = useSettingStore()
let type = computed(() => (props.row ? 'row' : props.column ? 'column' : 'row'))
let width = computed<number>(() => {
  if (props.size === 'mini') {
    return 22
  } else if (props.size === 'small') {
    return 33
  } else if (props.size === 'midle') {
    return 49.5
  } else if (props.size === 'large') {
    return 74.25
  } else {
    return 32
  }
})
</script>

<style lang="scss" scoped>
.log-container {
  display: flex;
  align-items: center;

  .svg-icon {
    flex-shrink: 0;
  }

  .title {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--menu-color);

    &[type='row'] {
      margin-left: 12px;
    }

    &[type='column'] {
      margin-top: 12px;
    }
  }
}
</style>
